<template style="margin: 0px">
  <!-- 菜单栏组件 -->
  <el-scrollbar class="mian" style="background-color: #545c64; height: calc(100vh)">
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="$route.path" text-color="#fff" :collapse="this.titles" :router="true">
      <!-- 首页 -->
      <el-menu-item index="/Index">
        <el-icon>
          <house />
        </el-icon>
        <span>首页</span>
      </el-menu-item>

      <!-- 优化 -->
      <el-sub-menu :index="item.path" v-for="(item, index) in Mians" :key="index">
        <template #title>
          <el-icon :class="'iconfont ' + item.meta.icon"></el-icon>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item v-for="(items, index) in item.children" :key="index" :index="'/' + item.path + '/' + items.path">{{ items.meta.title }}</el-menu-item>
      </el-sub-menu>
      <!-- 结束 -->
    </el-menu>
  </el-scrollbar>
</template>

<script>
import Mians from '@/router/pages' // 引入路由

import {
  House,
  Histogram,
  ShoppingCart,
  Management,
  User,
  Tools
} from '@element-plus/icons-vue' // 引入图标

export default {
  // 注册组件
  components: {
    House,
    Histogram,
    ShoppingCart,
    Management,
    User,
    Tools
  },

  // 组件传值
  props: ['titles'],

  // 组件实例尚未被创建时返回
  setup () {
    return {
      Mians
    }
  }
}
</script>

<style lang="less" scoped>
.mian {
  .el-menu {
    border: 0;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    //菜单展开关闭
    width: 200px;
    min-height: 500px;
  }
}
</style>
